<template>
  <HeaderBar
      :isFixed="true"
      title="订单详情"
      navBarBgc="linear-gradient(180deg, rgba(152,203,179,1) 0%, rgba(169,211,190,1) 29%, rgba(215,230,221,1) 74%);"
  ></HeaderBar>
  <view class="page-container">
    <view class="header-container flex flex-col items-center">
      <view class="logo-container flex items-center justify-center">
        <text>退</text>
        <text class="unit">￥</text>
      </view>
      <view class="total-amount">
        {{refundDataObj.refundAmount}}
      </view>
      <view class="product-name">
        {{refundDataObj.productName}}
      </view>
    </view>
    <view class="order-data-container">
      <view class="date-container">
        <view class="cell-container flex items-center justify-between">
          <view class="label">申请退款金额</view>
          <view class="value">{{refundDataObj.refundAmount}}</view>
        </view>
        <view class="cell-container flex items-center justify-between">
          <view class="label">退款原因</view>
          <view class="value">{{refundDataObj.refundCause}}</view>
        </view>
        <view class="cell-container flex items-center justify-between">
          <view class="label">退款至</view>
          <view class="value">原支付账户</view>
        </view>
        <view class="cell-container flex items-center justify-between">
          <view class="label">退款单号</view>
          <view class="value">{{refundDataObj.refundOrderId}}</view>
        </view>
      </view>
    </view>
    <view class="refund-process-container">
      <view class="title">退款进度</view>
      <view class="step-container" :vertical="true">
        <wd-steps :active="0" vertical>
          <wd-step v-for="(item,index) in refundDataObj.salesLogs" :key="index">
            <template #title>
              <view class="fs15 color9">{{item.notes}}</view>
            </template>
            <template #description>
              <view>{{item.createTime}}</view>
<!--              <view>等待商家审核确认</view>-->
            </template>
            <template #icon>
              <wd-icon :name="item.icon" :color="item.color" size="22px"></wd-icon>
            </template>
          </wd-step>
<!--          <wd-step >
            <template #title>
              <view class="fs15 color9">提交申请</view>
            </template>
            <template #description>
              <view>2025-04-12 14:25:32</view>
              <view>用户提交退款申请</view>
            </template>
            <template #icon>
              <wd-icon name="check-circle-filled" size="22px" color="#d7d7d7"></wd-icon>
            </template>
          </wd-step>-->
        </wd-steps>
      </view>
    </view>
    <view class="foot-btn-container">
      <view class="operation-btn flex items-center justify-between">
        <view class="service-btn btn flex items-center justify-center  bgcolor6" @click="showCustomerServicePopup = true">
          <i class="iconfont icon-kefu mr20"></i>
          联系客服
        </view>
        <view class="refund-btn btn color22 bgcolor7" @click="handleRevokeRefund">撤销退款</view>
      </view>
      <view class="safe-content" :style="{height: safeAreaBottom + 'px'}"></view>
    </view>
    <CustomServicePopup
        :showCustomerServicePopup="showCustomerServicePopup"
        @closePopup="showCustomerServicePopup = false"
    ></CustomServicePopup>
  </view>
</template>

<script setup>
  import {ref,reactive} from "vue";
  import {afterSalesDetail, revokeRefund} from "@/api/specialty";
  import CustomServicePopup from "@/specialtySubPack/components/customerServicePopup/index.vue";

  const orderId = ref("");
  const userId = ref("");
  const safeAreaBottom = ref(0);
  const showCustomerServicePopup = ref(false);
  const refundDataObj = reactive({
    refundAmount: 0,
    productName: "",
    refundCause: "",
    refundOrderId: "",
    salesLogs: []
  });

  const queryAfterSales = async () => {
    await afterSalesDetail({orderId: orderId.value, userId: userId.value}).then(res => {
      console.log(res,'queryAfterSales');
      let {
        refundAmount,
        productName,
        remark,
        refundId,
        salesLogs
      } = res.result;
      refundDataObj.refundAmount = refundAmount;
      refundDataObj.productName = productName;
      refundDataObj.refundCause = remark;
      refundDataObj.refundOrderId = refundId;
      if(salesLogs && salesLogs.length > 0) {
        salesLogs.forEach(item => {
          let {status} = item;
          switch (Number(status)) {
            case 0:
              item.icon = 'check-circle-filled';
              item.color = '#d9d9d9';
              break;
            case 1:
              item.icon = 'close-circle-filled';
              item.color = '#dc3506';
              break;
            default:
              item.icon = 'chart-pie';
              item.color = '#2b2b24';
              break;
          }
        });
      }
      refundDataObj.salesLogs = salesLogs.reverse();
    });
  };
  const handleRevokeRefund = async () => {
    await revokeRefund({orderId: orderId.value,userId: userId.value}).then(res => {
      console.log(res,'res');
      queryAfterSales();
    });
  };

  onLoad((options) => {
    let { orderId: _orderId } = options;
    orderId.value = _orderId;

    let {userId: _userId} = uni.getStorageSync("userInfo");
    userId.value = _userId;
    safeAreaBottom.value = uni.getSystemInfoSync().safeAreaInsets.bottom;
    queryAfterSales();
  });


</script>

<style lang="scss" scoped>
  .page-container {
    height: calc(100vh - 91px);
    padding: 91px 28rpx 100rpx 28rpx;
    background: linear-gradient(180deg, rgba(197,223,209,1) 0%, rgba(239,239,237,1) 25%, rgba(239,239,237,1) 30%, rgba(239,239,237,1) 97%);

    .header-container {
      margin-top: 40rpx;
      padding: 48rpx 157rpx 67rpx 157rpx;
      text-align: center;
      border-radius: 10rpx;
      background: #FFFFFF;
      .logo-container {
        font-size: 36rpx;
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        color: #FFFFFF;
        background: #aa5413;
        .unit {
          font-size: 20rpx;
        }
      }
      .total-amount {
        margin-top: 20rpx;
        font-size: 69rpx;
        font-weight: bold;
      }
      .total-amount:before {
        content: "￥";
        font-size: 30rpx;
      }
      .product-name {
        text-align: center;
        font-size: 29rpx;
        color: #2B2B24;
      }
    }

    .order-data-container {
      padding: 0 28rpx 50rpx 28rpx;
      border-radius: 10rpx;
      background: #FFFFFF;
      .date-container {
        padding-top: 34rpx;
        border-radius: 10rpx;
        border-top: 1rpx dashed #C0C2B3;
        .cell-container {
          margin-bottom: 30rpx;
          font-size: 25rpx;
        }
      }
    }

    .refund-process-container {
      padding: 37rpx 28rpx;
      margin-top: 27rpx;
      border-radius: 10rpx;
      background: #FFFFFF;
      .title {
        margin-bottom: 35rpx;
        font-size: 29rpx;
        font-weight: bold;
      }
    }
    .foot-btn-container {
      box-sizing: border-box;
      position: fixed;
      width: 100%;
      left: 0;
      bottom: 0;
      padding: 28rpx 28rpx 0 28rpx;
      background: #FFFFFF;
      .operation-btn {
        .btn {
          font-weight: bold;
          font-size: 29rpx;
          width: 48%;
          padding: 20rpx 0;
          border-radius: 10rpx;
          text-align: center;
        }
      }
    }
  }
</style>